좌측 패널

생성일: 2026년 9월 9일 오전 10:54

좌측 패널 구조 이해하기

좌측 패널은 프로젝트의 구조, 페이지 관리, 요소 추가, 데이터 연결 등
에디터의 주요 기능에 접근할 수 있는 작업 영역입니다.

1-3.png

Pages

Pages 패널에서는 현재 프로젝트에 포함된 페이지 목록과 레이어 구조를 확인할 수 있습니다.

Left_Pages.png

① 페이지 추가 버튼 : 현재 프로젝트에 빈 페이지 또는 유형별 새 페이지를 생성할 수 있습니다.
② 페이지 리스트의 표시 여부를 설정합니다.
③ 열려있는 레이어를 한번에 접을 수 있습니다.

Insert

Insert 패널에서는 레이아웃, 기본 요소와 미리 제작된 블록 섹션을 추가하여 페이지를 구성할 수 있습니다.
추가한 요소는 캔버스 영역에 즉시 배치되며, 우측 속성 패널에서 스타일을 수정할 수 있습니다.

Left _ Insert _ Elements.png

Left _ Insert _ Sections.png

💡사용 방법

  1. Insert 패널 선택
  2. 원하는 기본 요소 또는 컴포넌트 선택
  3. 클릭 또는 캔버스로 Drag & Drop

Library

Library 패널에서는 재사용 가능한 컴포넌트와 에셋, 스타일을 관리할 수 있습니다.

wireframe_light mode.png

① Components

반복해서 사용하는 UI 요소를 하나의 컴포넌트로 저장하여 여러 페이지에서 재사용할 수 있는 기능입니다.

Variant

하나의 컴포넌트에서 여러 스타일 상태를 관리할 수 있습니다.

Variant 설명
Primary 기본 버튼
Secondary 보조 버튼
Disabled 비활성 상태

💡 TIP

공통 UI를 Components로 관리하면 프로젝트 전체 디자인이 일관되게 사용할 수 있고,
수정 및 유지보수가 훨씬 쉬워집니다.

지원 기능

  • Components
  • Templates
  • Assets
  • Styles

활용 예시

  • 공통 버튼 재사용
  • 섹션별 템플릿 저장
  • 브랜드 컬러 관리

② Asset

프로젝트에서 사용하는 이미지, 비디오, 파일 등을 관리할 수 있습니다.

③ Styles

프로젝트 전체에서 사용하는 Typography, Color 등의 스타일을 일관성 있게 관리할 수 있고,
우측 스타일 패널에서 쉽게 저장된 스타일을 사용할 수 있습니다.

상품관리

상품관리 패널에서는 스토어에 연결된 상품 데이터를 조회하고 관리할 수 있습니다.
상품 상태, 노출 여부, 라벨 등을 한 화면에서 확인할 수 있으며, 선택한 상품을 일괄 수정할 수 있습니다.

wireframe_light mode.png

① 상품 상태 탭

상품 상태 별로 목록을 필터링 할 수 있습니다.

② 검색 및 필터 영역

상품명, 카테고리, 라벨 등을 기준으로 상품을 검색할 수 있습니다.

③ 상품 리스트

스토어에 연결된 상품 데이터를 리스트 형태로 확인할 수 있습니다.

④ 상태 라벨

상품에 상태 및 개별 라벨을 추가할 수 있습니다.

💡 TIP
상태 라벨은 상품 리스트 및 상품 상세 페이지에서 함께 사용할 수 있습니다.

⑤ 선택 액션 바

여러 상품을 선택하여 일괄 작업할 수 있습니다.

Setting > 기본 설정

기본 설정 에서는 쇼핑몰의 기본 정보와 검색/공유에 사용되는 대표 이미지를 관리할 수 있습니다.

기본설정.png

① 쇼핑몰 정보

쇼핑몰 이름과 검색 노출 정보를 설정할 수 있습니다.

설정 항목

  • 쇼핑몰명
  • 메타 타이틀
  • 메타 설명
  • 메타 키워드

② 기본 로고

사이트에 표시되는 대표 로고(svg/png)를 등록할 수 있습니다.

③ 파비콘

브라우저 탭에 표시되는 아이콘입니다.

④ 오픈그래프(OG)

SNS 공유 시 표시되는 이미지와 설명을 설정할 수 있습니다.

설정 항목

  • OG 제목
  • OG 설명
  • OG 이미지

💡 TIP

OG 이미지를 설정하면 SNS 공유 시 브랜드 노출 효과를 높일 수 있습니다.

Setting > 공통 스타일 설정

공통 스타일 설정 에서는 디자인 적용하지 않은 전체 페이지에서 사용하는
폰트, 컬러, 버튼 스타일 등을 한 번에 관리할 수 있습니다.

공통 스타일 설정.png

① 폰트 설정

프로젝트 전체에 공통으로 사용할 기본 폰트를 설정할 수 있습니다.

② 쇼핑몰 공통 색상

브랜드 대표 색상과 할인률 색상을 설정할 수 있습니다.

③ 버튼

주요 버튼 색상과 모양을 공통으로 관리할 수 있습니다.
우측 미리보기 영역에서 적용 결과를 바로 확인할 수 있습니다.

💡 TIP

공통 스타일을 먼저 설정하면 프로젝트 전체 디자인 일관성을 유지하기 쉽습니다.

Setting > UI 설정

UI 설정 에서는 에디터 화면 UI크기와 썸네일을 설정할 수 있습니다.

UI설정.png

① UI 크기

에디터 인터페이스의 표시 크기를 조절합니다.
캔버스 크기에는 영향을 주지 않으며, 에디터 UI만 확대 또는 축소됩니다.

② 썸네일 설정

프로젝트 목록에 표시될 대표 이미지를 설정합니다.

1. 이미지 파일로 등록

직접 이미지를 업로드하여 썸네일로 사용할 수 있습니다.

2. 현재 캔버스를 썸네일로 지정

현재 작업 중인 캔버스 화면을 프로젝트 썸네일로 사용할 수 있습니다.